<template>
  <div>
    <div class="ensure">
      <img :src="$store.state.ensuresrc" alt="">
    </div>
    <router-link to="" class="discount">
      <img :src="$store.state.discountsrc" alt="">
    </router-link>
    <reassembly :list='num'>
      <van-grid-item v-for="item in $store.state.assemblysrc" :key="item.id">
        <img :src="item.bannerImgSrc" />
      </van-grid-item>
    </reassembly>
    <reassembly :list='num2'>
      <van-grid-item v-for="item in $store.state.newarrivalsrc" :key="item.id" class="newarrivals">
        <img :src="item.bannerImgSrc" />
      </van-grid-item>
    </reassembly>
    <div class="ensure">
      <img :src="$store.state.inspired" alt="">
    </div>
    <reassembly :list='num3'>
      <van-grid-item v-for="item in $store.state.inspiredsrc" :key="item.id" class="getinspired">
        <img :src="item.bannerImgSrc" />
      </van-grid-item>
    </reassembly>
    <div class="ensure">
      <img :src="$store.state.collection" alt="">
    </div>
    <div class="aloneimg-div">
      <img :src="$store.state.collectionsrc.img" alt="" class="aloneimg">
      <reassembly :list='num2'>
        <van-grid-item v-for="item in $store.state.collectionsrc.imgsrc" :key="item.id" class="allcollection">
        <div>
          <img :src="item.productImg" alt="">
          <p>{{item.productTitle}}</p>
          <p>￥{{ item.sellPrice}}</p>
        </div>
        </van-grid-item>
      </reassembly>
    </div>
    <div class="aloneimg-div">
      <img :src="$store.state.living.img" alt="" class="aloneimg">
      <reassembly :list='num2'>
        <van-grid-item v-for="item in $store.state.living.imgsrc" :key="item.id" class="allcollection">
          <div>
            <img :src="item.productImg" alt="">
            <p class="p1">{{item.productTitle}}</p>
            <p>￥{{ item.sellPrice}} <span>￥{{item.originalPrice}}</span></p>
          </div>
        </van-grid-item>
      </reassembly>
    </div>
    <div class="ensure">
      <img :src="$store.state.datalist" alt="">
    </div>
    <insters v-for='item in $store.state.alldatalist' :key="item.id" :datalist="item"></insters>
  </div>
</template>
<script>
import reassembly from '@/components/reassembly'
import insters from '@/components/insters'
export default {
  data () {
    return {
      num: 2,
      num2: 3,
      num3: 1,
      datalsit: this.$store.state.datalist
    }
  },
  components: {
    reassembly,
    insters
  }
}
</script>
<style lang="scss">
  .ensure{
    display: flex;
    margin-bottom: 20px;
    align-content: space-around;
    img{
      width: 100%
    }
  }
  .discount{
    display: flex;
    margin-bottom: 30px;
    align-content: space-around;
    img{
      width: 100%
    }
  }
  .van-grid-item{
    margin-bottom: 20px;
    img{
      width: 280px
    }
  }
  .newarrivals{
    img{
      width: 170px;
      height: 230px;
    }
  }
  .getinspired{
    img{
      width: 100%
    }
  }
  .allcollection{
    margin-bottom: 20px;
    img{
      width: 180px;
      height: auto;
    }
    p{
      text-align: center;
      span{
        font-size: 14px;
        color: #c4bebe;
        text-decoration: line-through
      }
    }
    .p1{
      font-size: 12px
    }
  }
  .aloneimg{
    width: 100%
  }
  .aloneimg-div{
    padding-top:20px;
    background: white;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap:wrap;
    margin-bottom: 20px;
  }
</style>
